
<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0">
  <meta http-equiv="X-UA-Compatible" content="ie=edge">
  <title>聊天输入框</title>
  <style>
    html,
    body {
      height: 100%;
    }

    body {
      margin: 0;
      position: relative;
      -webkit-overflow-scrolling: touch;
    }

    .chat__content {
      height: calc(100% - 40px);
      margin-bottom: 40px;
      overflow-y: auto;
      overflow-x: hidden;
    }

    .chat__content p {
      display: inline-block;
      background-color: #ff706f;
      color: #fff;
      font-size: 13px;
      line-height: 22px;
      padding: 11px 15px 10px 16px;
      border-radius: 17px;
      word-break: break-word;
      border-top-left-radius: 0;
      min-width: 20px;
    }

    .input__content {
      display: flex;
      height: 40px;
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      align-items: center;
    }

    .input__content::after {
      content: "";
      position: absolute;
      border: 1px solid #cccccc;
      top: 0;
      left: 0;
      right: 0;
      transform: scaleY(.5);
    }

    .input__content .input {
      flex-grow: 1;
      word-break: break-all;
      font-size: 14px;
      padding-left: 10px;
    }

    .input__content button {
      width: 50px;
      height: 36px;
      flex-grow: 0;
      flex-shrink: 0;
      border-radius: 2px;
      border: none;
    }

    .input__content .input:focus,
    .input__content button:focus {
      outline: none;
    }
  </style>
</head>

<body>
  <div class="chat__content">
    <div>
      <p>一些聊天内容1</p>
    </div>
    <div>
      <p>一些聊天内容2</p>
    </div>
    <div>
      <p>一些聊天内容3</p>
    </div>
    <div>
      <p>一些聊天内容4</p>
    </div>
    <div>
      <p>一些聊天内容5</p>
    </div>
    <div>
      <p>一些聊天内容6</p>
    </div>
    <div>
      <p>一些聊天内容7</p>
    </div>
    <div>
      <p>一些聊天内容8</p>
    </div>
    <div>
      <p>一些聊天内容9</p>
    </div>
    <div>
      <p>一些聊天内容10</p>
    </div>
    <div>
      <p>一些聊天内容10</p>
    </div>
    <div>
      <p>一些聊天内容11</p>
    </div>
    <div>
      <p>一些聊天内容12</p>
    </div>
    <div>
      <p>一些聊天内容13</p>
    </div>
    <div>
      <p>一些聊天内容14</p>
    </div>
    <div>
      <p>一些聊天内容15</p>
    </div>
    <div>
      <p>一些聊天内容16</p>
    </div>
    <div>
      <p>一些聊天内容17</p>
    </div>
  </div>
  <div class="input__content">
    <div class="input" contenteditable="true"></div>
    <button>发送</button>
  </div>

  <script src="./js/vconsole.min.js"></script>
  <script>
    // new VConsole()

    // 判断设备类型
    var judgeDeviceType = function () {
      var ua = window.navigator.userAgent.toLocaleLowerCase();
      var isIOS = /iphone|ipad|ipod/.test(ua);
      var isAndroid = /android/.test(ua);
      var isMiuiBrowser = /miuibrowser/.test(ua);
      var isSafari = /Safari/i.test(ua) && !/Chrome/i.test(ua);

      return {
        isIOS: isIOS,
        isAndroid: isAndroid,
        isMiuiBrowser: isMiuiBrowser,
        isSafari: isSafari
      }
    }()

    // 获取到焦点元素滚动到可视区
    function activeElementScrollIntoView(activeElement, delay, scrollOption) {
      var editable = activeElement.getAttribute('contenteditable');

      // 输入框、textarea或富文本获取焦点后没有将该元素滚动到可视区
      if (activeElement.tagName == 'INPUT' || activeElement.tagName == 'TEXTAREA' || editable === '' || editable) {
        setTimeout(function () {
          console.log('scrollOption: ', scrollOption)
          activeElement.scrollIntoView(scrollOption);
        }, delay)
      }
    }

    // 监听输入框的软键盘弹起和收起事件
    function listenKeybord($input) {
      if (judgeDeviceType.isIOS) {
        // IOS 键盘弹起：IOS 和 Android 输入框获取焦点键盘弹起
        $input.addEventListener('focus', function () {
          console.log('IOS 键盘弹起啦！');
          // Safari 浏览器，`scrollIntoView` 参数设为 `false`，才使得聊天输入框刚好吸附在输入法上，为 `true` 会往上走一点
          activeElementScrollIntoView(this, 1000, !judgeDeviceType.isSafari);
        }, false)

        // IOS 键盘收起：IOS 点击输入框以外区域或点击收起按钮，输入框都会失去焦点，键盘会收起，
        $input.addEventListener('blur', () => {
          console.log('IOS 键盘收起啦！');

          // 微信浏览器版本6.7.4+IOS12会出现键盘收起后，视图被顶上去了没有下来
          var wechatInfo = window.navigator.userAgent.match(/MicroMessenger\/([\d\.]+)/i);
          if (!wechatInfo) return;

          var wechatVersion = wechatInfo[1];
          var version = (navigator.appVersion).match(/OS (\d+)_(\d+)_?(\d+)?/);

          if (+wechatVersion.replace(/\./g, '') >= 674 && +version[1] >= 12) {
            window.scrollTo(0, Math.max(document.body.clientHeight, document.documentElement.clientHeight));
          }
        })
      }

      // Andriod 键盘收起：Andriod 键盘弹起或收起页面高度会发生变化，以此为依据获知键盘收起
      if (judgeDeviceType.isAndroid) {
        var originHeight = document.documentElement.clientHeight || document.body.clientHeight;

        window.addEventListener('resize', function () {
          var resizeHeight = document.documentElement.clientHeight || document.body.clientHeight;
          if (originHeight < resizeHeight) {
            console.log('Android 键盘收起啦！');

            // 修复小米浏览器下，输入框依旧被输入法遮挡问题
            if (judgeDeviceType.isMiuiBrowser) {
              document.body.style.marginBottom = '0px';
            }
          } else {
            console.log('Android 键盘弹起啦！');

            // 修复小米浏览器下，输入框依旧被输入法遮挡问题
            if (judgeDeviceType.isMiuiBrowser) {
              document.body.style.marginBottom = '40px';
            }
            activeElementScrollIntoView($input, 1000, true);
          }

          originHeight = resizeHeight;
        }, false)
      }
    }

    var $inputs = document.querySelectorAll('.input');

    for (var i = 0; i < $inputs.length; i++) {
      listenKeybord($inputs[i]);
    }

  </script>
</body>

</html>